<!-- 全局配置组件 -->
<template>
  <n-config-provider
    abstract
    inline-theme-disabled
    :locale="zhCN"
    :date-locale="dateZhCN"
    :theme="theme"
    :theme-overrides="themeOverrides"
  >
    <n-loading-bar-provider>
      <n-dialog-provider>
        <n-notification-provider>
          <n-message-provider :max="1">
            <slot></slot>
            <NaiveProviderContent />
          </n-message-provider>
        </n-notification-provider>
      </n-dialog-provider>
    </n-loading-bar-provider>
  </n-config-provider>
</template>

<script setup lang="ts">
import {
  zhCN,
  dateZhCN,
  type GlobalThemeOverrides,
  useLoadingBar,
  useNotification,
  useDialog,
  useMessage
} from 'naive-ui'
import { theme } from '@/hooks/useTheme'

/**
 * 主题色
 * 主题变量类型 : Theme | null
 * themeOverrides 属性配置主题色: 对后代组件生效的主题变量覆盖
 */
const themeOverrides: GlobalThemeOverrides = {
  common: {
    primaryColor: '#ea444d',
    primaryColorHover: '#F57B74',
    primaryColorSuppl: '#F57B74',
    primaryColorPressed: '#F64B41'
  }
}

/**
 * 定义挂载全局navie方法的标签
 * useMessage等 返回的 值挂载到 window 下
 */
const setupNaiveTools = () => {
  window.$LoadingBar = useLoadingBar()
  window.$Notification = useNotification()
  window.$Dialog = useDialog()
  window.$Message = useMessage()
}

const NaiveProviderContent = defineComponent({
  setup() {
    setupNaiveTools()
    return {}
  },
  render() {
    return h('div', {
      class: {}
    })
  }
})
</script>

<style lang="scss" scoped></style>
